<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/detail.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=73d4991acebdd39e191da9d1564c2dbb"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="js/myhead.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 172px;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .advertising :hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <myhead @ar="gettitle">
        <template >
            <a href="login.html">登录</a>
            <el-link type="primary">注册</el-link>
        </template>
        <template >
        </template>
    </myhead>
    <div class="center">
        <div class="box">
            <div class="box_left">
                <div class="box_left_blog">博客
                    <span>共&nbsp;<a style="font-size: 20px;color: red;font-weight: bold" href="javascript:void(0)">{{page.total}}</a>&nbsp;篇</span>
                </div>
                <div class="box_left_bottom">
                    <div class="box_left_bottom_content" v-for="item in AllArticle" @click="change(item.aid)">
                        <span style="font-weight: bold;font-size: 30px;padding-left: 100px">{{item.title.length>10?item.title.substring(0,10)+'...':item.title}}</span>
                        <span style="float:right;font-weight: bold;font-size: 30px;padding-right: 100px">{{item.typeinfo.tname}}</span>
                        <div style="width: 100%;height: 77%;box-sizing: border-box">
                            <div style="height: 100%;width: 60%;box-sizing: border-box;float:left;">
                                <span style="font-size: 18px">{{item.showcol.length>30?item.showcol.substring(0,110)+'...':item.showcol}}</span>
                                <div class="box_left_bottom_bottom" >
                                   <img style="border-radius: 50%;width: 60px;height: 60px;margin-left:20px" :src="item.userinfo.photo" >
                                    <span class="box_left_bottom_name"><i class="el-icon-user"></i>&nbsp;{{item.userinfo.uname}}</span>
                                    <span class="box_left_bottom_time"><i class="el-icon-timer"></i>&nbsp;{{item.adate}}</span>
                                    <span class="box_left_bottom_saw"><i class="el-icon-view">&nbsp;</i>{{item.view}}</span>
<!--                                    <span class="box_left_bottom_saw"><i class="el-icon-location-outline">&nbsp;</i>{{item.address}}</span>-->
                                </div>
                            </div>
                            <div style="height: 100%;width: 40%;box-sizing: border-box;float: left">
                                <img :src="item.pic" style="width: 100%;height: 100%">
                            </div>
                        </div>
<!--                        <span>{{item.showcol.length>30?item.showcol.substring(0,110)+'...':item.showcol}}</span>
                        <div class="box_left_bottom_bottom" style="border: 1px solid red">
                            <div class="box_left_bottom_head"><el-avatar :size="50" :src="item.pic"></el-avatar></div>
                            <span class="box_left_bottom_name"><i class="el-icon-user"></i>&nbsp;{{item.userinfo.uname}}</span>
                            <span class="box_left_bottom_time"><i class="el-icon-timer"></i>&nbsp;{{item.adate}}</span>
                            <span class="box_left_bottom_saw"><i class="el-icon-view">&nbsp;</i>{{item.view}}</span>
                            <span class="box_left_bottom_type">{{item.typeinfo.tname}}</span>
                        </div>-->

                    </div>
                    <div class="final" style="display: flex;justify-content: center;margin-top: 15px">
                        <el-pagination class="c1"
                                       layout="prev, pager, next"
                                       :page-size="page.size"
                                       :current-page="page.page"
                                       @current-change="changeCurrent"
                                       :total="page.total">
                        </el-pagination>
                    </div>

            </div>
            </div>
            <div class="box_right">
                <div class="box_right_top">
                    <div class="box_right_top_type">分类</div>
                    <div class="box_right_top_content">
                        <ul style="font-size: 18px">
                            <li  @click="getArtByType(-1)"><a href="javascript:void(0)">全部</a></li>
                            <li v-for="item in type" @click="getArtByType(item.tid)"><a href="javascript:void(0)">{{item.tname}}</a><span style="margin-top: 5px">{{item.articleList.length}}</span></li>
                        </ul>
                    </div>
                </div>
                <div class="box_right_bottom">
                    <div class="box_right_bottom_type">最新推荐</div>
                    <div class="box_right_bottom_content">
                        <ul style="font-size: 18px">
                            <li v-for="item in viewBlog"><a href="javascript:void(0)">{{item.title}}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="box_right_weather">
                    <div style="width: 100%;height:60%;box-sizing: border-box">
                        <div id="container" style="width:40%;height:100%;box-sizing: border-box;float: left" ></div>
                        <div  style="width:60%;height:100%;box-sizing: border-box;float: left" >
                            <div style="width: 100%;height:50%;box-sizing: border-box">
                                <div style="width: 50%;height: 100%;float: left;box-sizing: border-box">
                                    <img  v-if=" this.weatherTemp[0]!=null &&this.weatherTemp[0].dayweather=='小雨'" src="image/weather/xiao.jpg" style="width: 100%;height: 100%;object-fit: contain">
                                    <img v-if="this.weatherTemp[0]!=null &&this.weatherTemp[0].dayweather=='多云'" src="image/weather/duo.jpg" style="width: 100%;height: 100%;object-fit: contain">
                                    <img v-if="this.weatherTemp[0]!=null &&this.weatherTemp[0].dayweather=='晴'" src="image/weather/qing.jpg" style="width: 100%;height: 100%;object-fit: contain">
                                </div>
                                <div style="font-weight:bold;font-size: 20px;width: 50%;height: 100%;padding-top:20px;float: left;box-sizing: border-box">
                                    <span style="padding-left: 20px;"  v-if="this.weatherTemp[0]!=null">{{this.weatherTemp[0].dayweather}}</span><br>
                                    &emsp;风向：<span style="display:inline-block;margin-top:12px;" v-if="this.weatherTemp[0]!=null">{{this.weatherTemp[0].daywind }}风</span>
                                </div>
                            </div>
                            <div style="height: 50%;width: 100%;box-sizing: border-box;font-weight:bold;font-size: 20px">
                                <p style="padding-left: 10px;padding-top: 20px"  v-if="this.weatherTemp[0]!=null">{{this.weekArray[Number(this.weatherTemp[0].week)-1]}}&ensp;{{this.weatherTemp[0].date}}</p>
                                <p style="padding-left: 10px;padding-top: 10px" v-if="this.weatherTemp[0]!=null">{{this.address}}&emsp;&emsp;&emsp;</p>

                            </div>
                        </div>


                    </div>
                    <div style="width: 100%;height: 40%;box-sizing: border-box">
                        <div v-for="item in weatherTemp" style="border: 1px solid grey; width:25%;height: 100%;box-sizing: border-box;float:left;font-weight: bold">
                            <p style="width: 100%;height: 25%;text-align: center;line-height: 38px" >{{item.date }}&nbsp;</p>
                            <p style="width: 100%;height: 50%;">
                                <img v-if="item.dayweather=='小雨'" src="image/weather/xiao.jpg" style="width: 100%;height: 100%;object-fit: contain">
                                <img v-if="item.dayweather=='多云'" src="image/weather/duo.jpg" style="width: 100%;height: 100%;object-fit: contain">
                                <img v-if="item.dayweather=='晴'" src="image/weather/qing.jpg" style="width: 100%;height: 100%;object-fit: contain">
                            </p>
                            <p style="width: 100%;height: 25%;text-align: center" >
                                <span >{{item.daytemp}}°C</span><br>
                                <span >{{item.nighttemp }}°C</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
    <div  class="advertising" v-bind:style="dynamicStyles">
        <div @click="CloseAds" class="advertisingDel" style=" position:fixed;bottom:190px;right: 10px;z-index: 999;width: 20px;height: 20px ;background-color: red;text-align: center;line-height: 20px">x</div>
        <el-carousel :interval="3000" arrow="always">
            <el-carousel-item v-for="item in advertisingPic" :key="item">
               <img :src="item.pic" style="  object-fit: contain;">
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="footer">
        <div class="er"></div>
        <div class="newBlog">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">最近博客</p>
            <p style="margin-top: 10px">用户故事(User Strory)</p>
            <p style="margin-top: 10px"> 关于刻意联系的清单</p>
            <p style="margin-top: 10px">失败要趁早</p>
        </div>
        <div class="lian">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">联系我们</p>
            <p style="margin-top: 10px">Email：2435939131@qq.com</p>
            <p style="margin-top: 10px">QQ：2435939131</p>
        </div>
        <div class="lie">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">Lirenmi</p>
            <p style="margin-top: 10px">这是我的个人博客、会分享关于编程、写作、思考相关的任何</p>
            <p style="margin-top: 10px">内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
    </div>
   </div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            dynamicStyles: {
              display:"block",
            },
            centerDialogVisible: false,
            AllArticle:[],
            page:{page:1,size:5,total:0},
            type:[],
            Article:{title:''},
            tid:-1,
            select: '',
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            viewBlog:[],
            currentTime: '',
            time:{currentTime:'',year:'',month:'',day:''},
            advertisingFlag:true,
            advertisingPic:"",
            wendu:22,
            weatherTemp:'',
            weekArray:["周一","周二","周三","周四","周五","周六","周日"],
            address:'',
            alipay:'',
            map:'',
            addressJingwei:{lng:'',lat:''},

        },
        methods:{
            homePage(){
                axios.post(`other/article/homePage?page=${this.page.page}&size=${this.page.size}&tid=${this.tid}`,this.Article).then(res=>{
                    if(res.data.code==1){
                        this.AllArticle=res.data.data.records;
                        this.page.total=res.data.data.total;
                    }
                })
            },
            gettitle(art){
               this.Article.title=art.title;
               console.log(this.Article)
              this.homePage();
            },

            CloseAds(){
               this.dynamicStyles={
                    display:"none",
                };
            },
            //得到类别
            getAlltype(){
                axios.get("getAllType").then(res=>{
                    this.type=res.data;
                })
            },
            //得到访问量最多的五个blog
            getNewBlog(){
                axios.get("index/getNewBlog").then(res=>{
                    this.viewBlog=res.data;

                })
            },
            getArtByType(tid){
                this.page.page=1;
                this.tid=tid;
                this.homePage();
             },
            change(aid){
                location.href="detail.html?"+aid;
            },
            //查找图片
            getAllPic(){
                axios.get(`../../other/advertising/getAllPic?page=${this.page.page}&size=${this.page.size}`).then(res=>{
                    this.advertisingPic=res.data.data.records;
                })
            },

            //点击分页查询
            changeCurrent(pager){
                this.page.page=pager;
                this.homePage();
            },
            myinfo(){
                var jwt=sessionStorage.getItem("jwt");
                axios.get("blog-user/userinfo/myinfo",{
                    headers:{
                        Authorization: jwt,
                    }
                }).then(res=>{
                    if(res.data.code==-1){
                        this.userinfo=null;


                    }else{
                        this.userinfo=res.data.data;
                        /* this.$emit('uo',this.userinfo);*/
                    }
                })
            },
            getAddress(){

            },
            //得到当前的天气
            getWeather(){
              axios.get("other/getWeather").then(res=>{
                  console.log(res.data)
                  this.weatherTemp=res.data.data.forecasts[0].casts;
                  this.wendu=Number(this.weatherTemp[0].daytemp)
                 this.address=(res.data.data. forecasts[0].province+"省 "+res.data.data. forecasts[0].city)
                console.log(this.weatherTemp)
                  this.c();
              })
            },
            createMap(){
                this.centerDialogVisible=true;
                this.$nextTick(()=>{
                    /*var map = new AMap.Map("mapDiv", {
                        resizeEnable: true,
                        center:[112.504181,26.91536],
                        zoom:11, //初始化地图层级
                    });
                    //为地图注册click事件获取鼠标点击出的经纬度坐标
                    map.on('click', function(e) {
                        map.panTo(new AMap.Map("mapDiv", {
                            resizeEnable: true,
                            center:[ e.lnglat.getLng(), e.lnglat.getLat()],
                            zoom:11, //初始化地图层级

                        }));

                      //  document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
                        console.log( e.lnglat.getLng() + ',' + e.lnglat.getLat());
                    });*/

                    var map = new BMapGL.Map('mapDiv'); // 创建Map实例
                    map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 15);// 初始化地图,设置中心点坐标和地图级别
                    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                    window.setTimeout(function(){
                        map.panTo(new BMapGL.Point(112.504184,26.914485));
                    },2000);
                    var geoc = new BMapGL.Geocoder();
                    map.addEventListener('click', function(e){
                        console.log(e)
                        map.panTo(new BMapGL.Point( e.latlng.lng, e.latlng.lat));
                        let a=e.latlng.lng;
                        let b=e.latlng.lat;
                        'https://api.map.baidu.com/reverse_geocoding/v3/?ak=你自己的ak密钥&output=json&coordtype=wgs84ll&location='+b+','+a
                        console.log(a)
                        console.log(b)

                    })
                    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                    map.addControl(scaleCtrl);
                    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
                    map.addControl(zoomCtrl);
                    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
                    map.addControl(cityCtrl);
                    var local = new BMapGL.LocationControl ();  // 添加城市列表控件
                    map.addControl(local);
                })
            },
            //改变经纬度
            changAddress(lng,lat){

            },
            //echars初始化
            c(){

                var dom = document.getElementById('container');
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var params = {
                    value: this.wendu,//数值
                    title: "温度"
                }

                var app = {};
                var TP_value = params.value;
                var kd = [];
                var Gradient = [];
                var leftColor = '';
                var showValue = '';
                var boxPosition = [65, 0];
                var TP_txt = ''
                // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
                for (var i = 0, len = 135; i <= len; i++) {
                    if (i < 10 || i > 130) {
                        kd.push('')
                    } else {
                        if ((i - 10) % 20 === 0) {
                            kd.push('-3');
                        } else if ((i - 10) % 4 === 0) {
                            kd.push('-1');
                        } else {
                            kd.push('');
                        }
                    }

                }
                //中间线的渐变色和文本内容
                if (TP_value > 50) {
                    TP_txt = '';
                    Gradient.push({
                        offset: 0,
                        color: '#93FE94'
                    }, {
                        offset: 0.5,
                        color: '#E4D225'
                    }, {
                        offset: 1,
                        color: '#E01F28'
                    })
                } else if (TP_value >= 35) {
                    TP_txt = '';
                    Gradient.push({
                        offset: 0,
                        color: '#93FE94'
                    }, {
                        offset: 1,
                        color: '#E4D225'
                    })
                } else {
                    TP_txt = '';
                    Gradient.push({
                        offset: 1,
                        color: '#93FE94'
                    })
                }

                leftColor = Gradient[Gradient.length - 1].color;
                // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
                var option = {
                    // backgroundColor: '#098',
                    // backgroundColor: 'white',
                    title: {
                        text: params.title,
                        textStyle: {
                            color: "#010081",
                            align: "center",
                        },
                        left: "45%",
                    },
                    grid: { // 控制图的大小，调整下面这些值就可以，
                        left: "30%",
                        top: "3%",
                        bottom: "14%",
                    },
                    yAxis: [{
                        show: false,
                        data: [],
                        min: 0,
                        max: 135,
                        axisLine: {
                            show: false
                        }
                    }, {
                        show: false,
                        min: 0,
                        max: 50,
                    }, {
                        type: 'category',
                        data: ['', '', '', '', '', '', '', '', '', ''],
                        position: 'left',
                        offset: -80,
                        axisLabel: { // 单位
                            fontSize: 10,
                            color: 'black'
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    }],

                    xAxis: [{
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    }, {
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    }, {
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    }, {
                        show: false,
                        min: -5,
                        max: 80,

                    }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        // 对应上面XAxis的第一个对)象配置
                        xAxisIndex: 0,
                        data: [{
                            value: (TP_value + 30),//这个改那个颜色刻度的
                            label: {
                                normal: {
                                    show: true,
                                    position: boxPosition,
                                    width: 20,
                                    height: 100,
                                    formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
                                    rich: {
                                        back: {
                                            align: 'center',
                                            lineHeight: 50,
                                            fontSize: 30,
                                            fontFamily: 'digifacewide',
                                            color: leftColor
                                        },
                                        unit: {
                                            fontFamily: '微软雅黑',
                                            fontSize: 15,
                                            lineHeight: 50,
                                            color: leftColor
                                        },
                                        downTxt: {
                                            lineHeight: 50,
                                            fontSize: 25,
                                            align: 'center',
                                            color: leftColor
                                        }
                                    }
                                }
                            },
                        }],

                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
                            }
                        },
                        z: 2
                    }, {
                        name: '白框',
                        type: 'bar',
                        xAxisIndex: 1,
                        barGap: '-100%',
                        data: [134],
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                barBorderRadius: 50,
                            }
                        },
                        z: 1
                    }, {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 2,
                        barGap: '-100%',
                        data: [135],
                        barWidth: 28,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                barBorderRadius: 50,
                            }
                        },
                        z: 0
                    }, {
                        name: '圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 0,
                        symbolSize: 38,
                        itemStyle: {
                            normal: {
                                color: '#93FE94',
                                opacity: 1,
                            }
                        },
                        z: 2
                    }, {
                        name: '白圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 1,
                        symbolSize: 50,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                opacity: 1,
                            }
                        },
                        z: 1
                    }, {
                        name: '外圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 2,
                        symbolSize: 60,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                opacity: 1,
                            }
                        },
                        z: 0
                    }, {
                        name: '刻度',
                        type: 'bar',
                        yAxisIndex: 0,
                        xAxisIndex: 3,
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                distance: 15, // 刻度数据位置
                                color: '#000000',// 刻度数字颜色
                                fontSize: 14,
                                formatter: function (params) {
                                    if (params.dataIndex > 130 || params.dataIndex < 10) {
                                        return '';
                                    } else {
                                        if ((params.dataIndex - 10) % 20 === 0) {
                                            return params.dataIndex - 30;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            }
                        },
                        barGap: '-100%',
                        data: kd,
                        barWidth: 1,
                        itemStyle: {
                            normal: {
                                color: '#000000', // 刻度线颜色
                                barBorderRadius: 120,
                            }
                        },
                        z: 0
                    }]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            }
        },
        created(){
           // this.getAllArticle();
            this.getAlltype();
            this.getNewBlog();
            this.getArtByType(-1);
            this.myinfo();
            this.getAllPic();
            this.homePage();
            this.getWeather();
            this.getAddress();
        },
        mounted() {


        },
    })
</script>
</body>
</html>